<template>
    <div class="grandfather-box">
        <h3>爷爷组件</h3>
        <h4>爷爷组件自己拥有{{money}}</h4>
        <!-- ref="father" 给组件命名 -->
        <father-box :money="money" ref="father" />
    </div>
</template>

<script>
import FatherBox from './FatherBox.vue'
    export default {
        components:{
            FatherBox
        },
        data(){
            return {
                money:1000000,
                name:"爷爷组件"
            }
        },
        mounted(){
            //可以使用ref给使用的组件命名,然后就可以通过this.$refs对象上的属性取到子组件的实例
            console.log(this.$refs.father);
            // console.log(this.$refs.father.$refs.son);
        }
    }
</script>

<style lang="sass" scoped>
.grandfather-box
    margin: 10px
    padding: 10px
    border: 3px solid #000
</style>